var $titleHeader;
var $titlePicture;
var $title;
var $content;
var $price;
var $contentPicture;
var product;

var $homeBtn;
var $cartBtn;
var $addBtn;
var $saleBtn;


function init() {
    var id = $.webUtil.getQueryString("id");
    $titleHeader = $('#titleHeader');

    $titlePicture = $('#titlePicture');
    $title = $('#title');
    $content = $('#content');
    $price = $('#price');
    $contentPicture = $('#contentPicture');

    $homeBtn = $('#homeBtn');
    $cartBtn = $('#cartBtn');
    $addBtn = $('#addBtn');
    $saleBtn = $('#saleBtn');

    mui.ajax($.constant.webRoot() + 'v1/product/' + id, {
        dataType: 'json',
        type: 'GET',
        async: false,
        success: function (data) {
            product = data;
        }
    });
}

function initCartBadge() {

    mui.ajax($.constant.webRoot() + 'v1/cart/num', {
        type: 'GET',
        success: function (response) {
            if (response.code === 200) {
                if (response.data === 0) {
                    $cartBtn.find('.mui-badge').hide();
                } else {
                    $cartBtn.find('.mui-badge').show();
                    $cartBtn.find('.mui-badge').text(response.data);
                }
            }
        }
    });
}

function initView() {

    initCartBadge();

    if (!product) {
        return;
    }
    $titleHeader.text(product.title);

    var titlePictureList = [];
    if (product.titlePicture) {
        titlePictureList = product.titlePicture.split('|');
    }

    for (var i = 0; i < titlePictureList.length; i++) {
        var itemHtml = '<div class="mui-slider-item"><a href="#"><img src="' + titlePictureList[i] + '"/></a></div>';
        if (i === 0) {
            itemHtml = '<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="' + titlePictureList[titlePictureList.length - 1] + '"/></a></div>' +
                '<div class="mui-slider-item"><a href="#"><img src="' + titlePictureList[0] + '"/></a></div>';
        }
        if (i === (titlePictureList.length - 1)) {
            itemHtml = '<div class="mui-slider-item"><a href="#"><img src="' + titlePictureList[titlePictureList.length - 1] + '"/></a></div>' +
                '<div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="' + titlePictureList[0] + '"/></a></div>';
        }
        $titlePicture.append(itemHtml);
    }
    var muiSlider = mui('.mui-slider');
    muiSlider.slider({
        interval: 5000
    });

    $title.text(product.title);
    $content.text(product.content);
    $price.text(product.price);
    var contentPictureList = [];
    if (product.contentPicture) {
        contentPictureList = product.contentPicture.split("|");
    }
    for (var i = 0; i < contentPictureList.length; i++) {
        var itemHtml = '<img src="' + contentPictureList[i] + '">';
        $contentPicture.append(itemHtml);
    }
}

function initListener() {
    $homeBtn.bind('tap', function () {
        mui.openWindow('../home/index.html', 'id');
    });
    $cartBtn.bind('tap', function () {
        mui.openWindow('../cart/index.html', 'id');
    });

    $saleBtn.bind('tap', function () {

    });

    $addBtn.bind('tap', function () {
        mui.ajax($.constant.webRoot() + 'v1/cart/item', {
            dataType: 'json',
            type: 'POST',
            async: false,
            data: {
                id: product.id
            },
            success: function (data) {
                if (data.code === 200) {
                    mui.toast(data.message);
                    initCartBadge();
                } else {
                    mui.toast(data.message);
                }
            }
        });
    });
}

$(function () {
    init();
    initView();
    initListener();

});

